<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}


<!-- 写入 base.html 中定义的 title -->
{% block title %}
    文章详情|老鑫头の个人博客
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}

    <!-- 文章详情 -->
    <div class="container">
        <div class="row" style="background: white">

            <!-- 目录 -->
            <div class="col-3 mt-4 " id="sidebar" class="sidebar">
                <div class="sidebar__inner">
                    <h4 style="text-align: center"><strong>目录</strong></h4>
                    <hr>
                    <div>
                        {{ toc|safe }}
                    </div>
                </div>
            </div>

            <div class="col-9">
                <!-- 标题及作者 -->
                <h1 class="mt-4 mb-4" align="center">{{ article.title }}</h1>
                <div class="alert alert-success">
                    作者：{{ article.author }}
                    {% if user == article.author %}
                        · <a href="#" onclick="confirm_delete()">删除文章</a>

                        · <a href="{% url "article:article_update" article.id %}">编辑文章</a>
                    {% endif %}

                    <!-- 显示浏览量 -->
                    <span>
                    <small class="col align-self-end" style="color: gray;">
                        浏览: {{ article.total_views }}
                    </small>
                    </span>
                    <span>
                        <small class="col align-self-end" style="color: gray;">
                        更新于：{{ article.updated|date:'Y-m-d f' }}
                        </small>
                    </span>
                </div>
                <div class="col-12" style="margin: 0 auto">
                    {% if article.avatar %}
                        <img src="{{ article.avatar.url }}"
                             alt="avatar"
                             style="width: 100%; border-radius: 20px">
                    {% else %}

                    {% endif %}
                </div>
                <!-- 文章正文 -->
                <div class="col-12">

                    <p style="text-indent: 2em">{{ article.body|safe }}</p>
                </div>

                <!-- 新增点赞按钮 -->
                <div style="text-align:center;" class="mt-4">
                    <button class="btn btn-outline-danger"
                            type="button"
                            onclick="validate_is_like(
                                    '{% url 'article:increase_likes' article.id %}',
                                    {{ article.id }},
                                    {{ article.likes }}
                                    )"
                    >
                        <span>这篇文章很赞哦</span>
                        <span>
                            <i class="fas fa-heart"></i>

                        </span>

                        <span id="likes_number">
                            {{ article.likes }}
                        </span>
                    </button>
                </div>


                <!-- 相邻文章导航 -->
                <div class="row justify-content-end">
                    {% if next_article %}
                        <div class="col-auto mr-auto">
                            <a href="{{ next_article.get_absolute_url }}"
                               class="btn btn-info"

                            >
                                <<{{ next_article.title }}
                            </a>
                        </div>
                    {% endif %}
                    {% if pre_article %}
                        <div class="col-auto">
                            <a href="{{ pre_article.get_absolute_url }}"
                               class="btn btn-info"
                            >
                                {{ pre_article.title }}>>
                            </a>
                        </div>
                    {% endif %}
                </div>

                <!-- 发表评论 -->
                <hr>
                {% if user.is_authenticated %}
                    <script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
                    <link rel="stylesheet" href="{% static 'prism/prism.css' %}">
                    <div>
                        <form action="{% url 'comment:post_comment' article.id %}" method="POST">
                            {% csrf_token %}
                            <div class="form-group">
                                <label for="body">
                                    <strong>
                                        我也要发言：
                                    </strong>
                                </label>

                                <div>
                                    {{ comment_form.media }}
                                    {{ comment_form.body }}
                                </div>
                            </div>
                            <!-- 提交按钮 -->
                            <button type="submit" class="btn btn-primary ">发送</button>
                        </form>
                    </div>
                    <br>
                {% else %}
                    <br>
                    <h5 class="row justify-content-center">
                        请<a href="{% url 'userprofile:login' %}">登录</a>后回复
                    </h5>
                    <br>
                {% endif %}



                <!-- 显示评论 -->
                {% load mptt_tags %}
                <h4>共有{{ comments.count }}条评论</h4>
                <div class="row">
                    <!-- 遍历树形结构 -->
                    {% recursetree comments %}
                        <!-- 给 node 取个别名 comment -->
                        {% with comment=node %}
                            <div class="{% if comment.reply_to %}
                            offset-1 col-11{% else %}
                            col-12{% endif %}"
                                 id="comment_elem_{{ comment.id }}">
                                <hr>
                                <p>
                                    <strong style="color: pink">
                                        {{ comment.user }}
                                    </strong>

                                    {% if comment.reply_to %}
                                        <i class="far fa-arrow-alt-circle-right"
                                           style="color: cornflowerblue;"
                                        ></i>
                                        <strong style="color: pink">
                                            {{ comment.reply_to }}
                                        </strong>
                                    {% endif %}

                                </p>
                                <div>{{ comment.body|safe }}</div>

                                <div>
                                    <span style="color: gray">
                                        {{ comment.created|date:"Y-m-d H:i" }}
                                    </span>
                                    <!-- 加载 modal 的按钮 -->
                                    {% if user.is_authenticated %}
                                        <button type="button"
                                                class="btn btn-light btn-sm text-muted"
                                                onclick="load_modal({{ article.id }}, {{ comment.id }})">
                                            回复
                                        </button>
                                    {% else %}
                                        <a class="btn btn-light btn-sm text-muted"
                                           href="{% url 'userprofile:login' %}">
                                            回复
                                        </a>
                                    {% endif %}
                                </div>

                                <!-- Modal -->
                                <div class="modal fade"
                                     id="comment_{{ comment.id }}"
                                     tabindex="-1"
                                     role="dialog"
                                     aria-labelledby="CommentModalCenter"
                                     aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                        <div class="modal-content" style="height: 480px">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalCenterTitle">
                                                    回复 {{ comment.user }}：</h5>
                                            </div>
                                            <div class="modal-body" style="height: max-content"
                                                 id="modal_body_{{ comment.id }}"></div>
                                        </div>

                                    </div>
                                </div>

                                {% if not comment.is_leaf_node %}
                                    <div class="children">
                                        {{ children }}
                                    </div>
                                {% endif %}
                            </div>


                        {% endwith %}
                    {% endrecursetree %}
                </div>
                <br><br>

                {% block script %}
                    <!--删除文章弹窗-->
                    <script>
                        // 删除文章的函数
                        function confirm_delete() {
                            // 调用layer弹窗组件
                            layer.open({
                                // 弹窗标题
                                title: "确认删除",
                                // 正文
                                content: "确认删除这篇文章吗？",
                                // 点击确定按钮后调用的回调函数
                                yes: function (index, layero) {
                                    // 指定应当前往的 url
                                    location.href = '{% url "article:article_delete" article.id %}'
                                },
                            })
                        }
                    </script>

                    <!-- 引入粘性侧边栏 -->
                    <script src="{% static 'sticky_sidebar/jquery.sticky-sidebar.min.js' %}"></script>
                    <script type="text/javascript">
                        $('#sidebar').stickySidebar({
                            topSpacing: 20,
                            bottomSpacing: 20,
                        });
                    </script>

                    <!-- 唤醒二级回复的 load_modal -->
                    <script>
                        // 加载 modal
                        function load_modal(article_id, comment_id) {

                            let modal_body = '#modal_body_' + comment_id;
                            let modal_id = '#comment_' + comment_id;

                            // 加载编辑器
                            if ($(modal_body).children().length === 0) {
                                let content = '<iframe src="/comment/post-comment/' +
                                    article_id +
                                    '/' +
                                    comment_id +
                                    '"' +
                                    ' frameborder="0" style="width: 100%; height: 100%;" id="iframe_' +
                                    comment_id +
                                    '"></iframe>';
                                $(modal_body).append(content);
                            }
                            ;

                            $(modal_id).modal('show');
                        }
                    </script>

                    <!-- 点赞+1 -->
                    <!-- csrf token -->
                    <script src="{% static 'csrf.js' %}"></script>
                    <script>
                        // 点赞功能主函数
                        function validate_is_like(url, id, likes) {
                            // 取出 LocalStorage 中的数据
                            let storage = window.localStorage;
                            const storage_str_data = storage.getItem("my_blog_data");
                            let storage_json_data = JSON.parse(storage_str_data);
                            // 若数据不存在，则创建空字典
                            if (!storage_json_data) {
                                storage_json_data = {}
                            }
                            ;
                            // 检查当前文章是否已点赞。是则 status = true
                            const status = check_status(storage_json_data, id);
                            if (status) {
                                layer.msg('已经点过赞了哟~');
                                // 点过赞则立即退出函数
                                return;
                            } else {
                                // 用 Jquery 找到点赞数量，并 +1
                                $('span#likes_number').text(likes + 1).css('color', '#dc3545');
                            }
                            // 用 ajax 向后端发送 post 请求
                            $.post(
                                url,
                                // post 只是为了做 csrf 校验，因此数据为空
                                {},
                                function (result) {
                                    if (result === 'success') {
                                        // 尝试修改点赞数据
                                        try {
                                            storage_json_data[id] = true;
                                        } catch (e) {
                                            window.localStorage.clear();
                                        }
                                        ;
                                        // 将字典转换为字符串，以便存储到 LocalStorage
                                        const d = JSON.stringify(storage_json_data);
                                        // 尝试存储点赞数据到 LocalStorage
                                        try {
                                            storage.setItem("my_blog_data", d);
                                        } catch (e) {
                                            // code 22 错误表示 LocalStorage 空间满了
                                            if (e.code === 22) {
                                                window.localStorage.clear();
                                                storage.setItem("my_blog_data", d);
                                            }
                                        }
                                        ;
                                    } else {
                                        layer.msg("与服务器通信失败..过一会儿再试试呗~");
                                    }

                                }
                            );
                        };

                        // 辅助点赞主函数，验证点赞状态
                        function check_status(data, id) {
                            // 尝试查询点赞状态
                            try {
                                if (id in data && data[id]) {
                                    return true;
                                } else {
                                    return false;
                                }
                            } catch (e) {
                                window.localStorage.clear();
                                return false;
                            }
                            ;
                        };
                    </script>
                {% endblock script %}

            </div>


            <!-- 粘性侧边栏样式 -->
            <style>
                .sidebar {
                    will-change: min-height;
                }

                .sidebar__inner {
                    transform: translate(0, 0);
                    transform: translate3d(0, 0, 0);
                    will-change: position, transform;
                }
            </style>

        </div>
    </div>



{% endblock content %}